<template>
	<div class="tags">
		<!--    伪选择框-->
		<div class="tags-box" :class="[selectType == true?'tags-box-border-choose':'tags-box-border']">
			<span class="tags-box-title" v-if="!tagsForm">状态</span>
			<div class="tags-item" v-if="tagsForm">
				<i class="iconfont tags-item-icon" :class="tagsForm.icon" :style="{color:tagsForm.color}"></i>
				<span class="tags-item-title">{{ tagsForm.label }}</span>
			</div>
			<i class="tags-box-icon el-icon-arrow-down"
				:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
		</div>
		<el-select ref="tagsSelect" style="width: 100%" v-model="selectTitle" @visible-change="visibleChange"
			size="medium" placeholder="请选择" value-key="value" @change="statusChoose">
			<el-option v-for="item in options" v-if="item.taskType == 1" :key="item.value" :label="item.label" :value="item">
				<i class="iconfont task-popover-icon" :class="item.icon" :style="{color:item.color}"></i>
				<span style="font-size: 14px;">{{ item.label }}</span>
			</el-option>
		</el-select>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				options: [{
						value: '00',
						label: '待办的',
						type: false,
						color: 'rgb(250, 145, 31)',
						icon: 'icon-shuangyuanquan-copy',
						taskType: 0
					}, {
						value: '01',
						label: '已确认',
						type: false,
						color: 'rgb(100, 203, 148)',
						icon: 'icon-yiwancheng-copy',
						taskType: 0
					},
					{
						value: '02',
						label: '设计中',
						type: false,
						color: 'rgb(86, 198, 255)',
						icon: 'icon-designer-copy',
						taskType: 0
					},
					{
						value: '04',
						label: '开发中',
						type: false,
						color: 'rgb(69, 240, 210)',
						icon: 'icon-shuangyuan',
						taskType: 0
					},
					{
						value: '05',
						label: '修复中',
						type: false,
						color: 'rgb(85, 187, 255)',
						icon: 'icon-shuangyuan',
						taskType: 0
					},
					{
						value: '06',
						label: '进行中',
						type: false,
						color: 'rgb(250, 145, 31)',
						icon: 'icon-shuangyuanquan-copy',
						taskType: 0
					},
					{
						value: '07',
						label: '已完成',
						type: false,
						color: 'rgb(70, 216, 171)',
						icon: 'icon-yiwancheng-copy',
						taskType: 0
					},
					{
						value: '08',
						label: '已验收',
						type: false,
						color: 'rgb(80, 196, 27)',
						icon: 'icon-xiaolian1-copy',
						taskType: 0
					},
					{
						value: '09',
						label: '已取消',
						type: false,
						color: 'rgb(248, 120, 103)',
						icon: 'icon-yemian-1',
						taskType: 0
					},
					{
						value: '10',
						label: '已拒绝',
						type: false,
						color: 'rgb(255, 113, 113)',
						icon: 'icon-yemian-1',
						taskType: 0
					}
				],
				selectIndex:-1,
				selectTitle: '',
				selectType: false,
				tagsForm: null,
				checkboxloading: false
			}
		},
		props: ['status'],
		watch: {
			status: {
				handler(val, oldval) {
					console.log(val)
					this.options.forEach(function(item) {
						if (val == '00' || val == '01' || val == '02') {
							if (item.value == '00' || item.value == '01' || item.value == '02' || item.value ==
								'04' || item.value == '07' || item.value == '08' || item.value == '10') {
								item.taskType = 1
							} else {
								item.taskType = 0
							}
						} else if (val == '04' || val == '05') {
							if (item.value == '00' || item.value == '01' || item.value == '05' || item.value ==
								'07' || item.value == '08' || item.value == '09') {
								item.taskType = 1
							} else {
								item.taskType = 0
							}
						} else if (val == '06') {
							if (item.value == '00' || item.value == '06' || item.value == '07' || item.value ==
								'08' || item.value == '10') {
								item.taskType = 1
							} else {
								item.taskType = 0
							}
						}
					})
				},
				// 深度观察监听
				deep: true,
				immediate: true
			}
		},
		methods: {
			statusChoose(data){
				console.log(data)
				this.tagsForm = data
				this.$emit('satausClick',this.tagsForm)
			},
			visibleChange(item) {
				var _this = this
				console.log(item)
				_this.selectType = item
			},
			emptyClick(){
				this.selectTitle = ''
				this.tagsForm = null
			}
		}
	}
</script>

<style scoped>
	.select {
		max-height: 380px;
		overflow: auto;
	}

	.select-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		color: #333333;
		justify-content: space-between;
	}

	.select-item:hover {
		background-color: rgba(88, 96, 105, 0.06);
	}

	.select-item-sign {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-right: 5px;
	}


	.tags-item {
		padding: 6px 6px;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 1px solid #e9e9eb;
	}

	.tags-item-title {
		max-width: 66px;
		font-size: 12px;
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 500;
		color: #909399;
	}

	.tags-item-subtitlt {
		font-size: 12px;
		color: #606266;
		display: block;
		margin-left: 8px;
		white-space: nowrap;
	}

	.tags {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e47777;
		border-radius: 4px;
		position: relative;
	}

	.tags-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 4px;
		pointer-events: none;
		background-color: #f5f6f8;
		padding-left: 4px;
		padding-right: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.tags-box-icon {
		color: #C0C4CC;
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		position: absolute;
		right: 10px;
	}

	.transformIcon {
		transform: rotateZ(-180deg);
	}

	.transformIconChoose {
		transform: rotateZ(0deg);
	}

	.tags-box-border {
		border: 1px solid #f5f6f8;
	}

	.tags-box-border-choose {
		border: 1px solid #1890ff;
	}

	.tags-box-title {
		color: #C0C4CC;
		font-size: 14px;
		font-weight: 500;
		display: block;
		margin-left: 10px;
	}


	.task-popover-icon {
		font-size: 16px;
		margin-right: 5px;
	}

	.tags-item-icon {
		font-size: 12px;
		margin-right: 5px;
	}

	.rejected {
		color: rgb(236, 0, 25);
	}

	.completed {
		color: rgb(254, 188, 8);
	}

	.inProgress {
		color: rgb(74, 144, 226);
	}

	.toDo {
		color: rgb(254, 115, 0);
	}

	/deep/.el-input--medium .el-input__inner {
		background-color: #f5f6f8;
		border-color: #F5F6F8;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/deep/.el-input--medium .el-input__inner:hover {
		background-color: #ecedf0;
	}

	/deep/.el-select {
		width: 100%;
	}
</style>
